/**
 * Created by tanbingqin on 2019/12/26.
 */
import React, { Component, PropTypes } from 'react';
import CompactInput from 'components/compact-input'
import { Form, Select, Input } from 'antd';
import Chooser from 'components/chooser'
import Searcher from 'components/searcher'
import { messages, deepFullCopy } from "share/common";
const FormItem = Form.Item;
const Option = Select.Option;
import formService from 'containers/setting/form/form.service'
import baseService from 'share/base.service'
import chooserData from 'share/chooserData'

class AllocationForm extends Component {
  range = [{
    value: 'ALL',
    text: messages('common.all')/*全部*/
  }, {
    value: 'PARTIAL',
    text: messages('request-1.key734')/*部分*/
  }];

  state = {
    range: 'ALL',
    value: []
  };

  componentMap = {
    Chooser,
    Searcher
  };

  handleChangeRange = range => {
    this.setState({ range, value: [] }, this.dispatchOnChange)
  };

  componentDidMount() {
    const { value } = this.props;
    this.setValue(this.props.value);
  }

  componentWillReceiveProps(nextProps) {
    if('value' in nextProps) {
      this.setValue(nextProps.value)
    }
  }

  setValue = value => {
    if(value) {
      const { parser } = this.props;
      this.setState(parser(value));
    }
  };

  renderValueComponent = () => {
    const { range, value, fatherExpenseType, expenseTypeCategory } = this.state;
    const { componentProps, component, setOfBooksId, disabled } = this.props;
    switch(range) {
      case 'ALL':
        return <Input disabled value={messages('request-1.key735')/*通用*/}/>;
      case 'PARTIAL':
        let chooserItem = deepFullCopy(chooserData['available_related_form']);
        chooserItem.searchForm = [
          {
            type: 'input',
            id: 'keyword',
            label: messages('request-1.key358')/*申请单名称*/
          },
          {
            type: 'input',
            id: 'remarkKeyword',
            label: messages('request-1.key200')/*备注temp*/
          }
        ];
        const partialFormProps = Object.assign({}, {
          labelKey: 'formName',
          valueKey: 'formOID',
          showNumber: true,
          selectorItem: chooserItem
        }, componentProps[range]);
        const PartialFormComp = this.componentMap[component[range]] || 'Chooser';
        return <PartialFormComp
          value={value}
          disabled={disabled}
          onChange={this.onChangeValue}
          {...partialFormProps}
        />;
      default:
        return <Input disabled value={messages('request-1.key735')/*通用*/}/>;
    }
  };

  onChangeValue = value => {
    this.setState({ value }, this.dispatchOnChange);
  };

  dispatchOnChange = () => {
    const { range, value } = this.state;
    const { onChange, formatter } = this.props;
    onChange && onChange(formatter({
      range, value
    }))
  };

  render() {
    const { disabled, value } = this.props;
    return (
      <div>
        <CompactInput>
          <Select
            disabled={disabled}
            style={{width: '100%'}}
            onChange={this.handleChangeRange}
            value={value && value.range}
            getPopupContainer={triggerNode => triggerNode.parentNode}
          >
            {
              this.range.map(option => <Option key={option.value}>{option.text}</Option>)
            }
          </Select>
          {this.renderValueComponent()}
        </CompactInput>
      </div>
    );
  }

  static propTypes = {
    onChange: PropTypes.func,
    component: PropTypes.object,
    componentProps: PropTypes.object,
    parser: PropTypes.func,
    formatter: PropTypes.func,
    disabled: PropTypes.bool
  };

  static defaultProps = {
    onChange: () => {},
    component: {
      'PARTIAL': 'Chooser'
    },
    componentProps: {
      'PARTIAL': {}
    },
    parser: value => value,
    formatter: value => value,
    disabled: false
  };
}

export default AllocationForm;
